<template>
    <view class="achievement-content">
        <view class="center-detail">
            <view class="center-item">
                <view class="center-col">
                    <view class="center-point">今日业绩(元)</view>
                    <view class="center-pointnum">{{ floatDivide(Data.toDayPerformance, 100) }}</view>
                </view>
                <view class="center-col">
                    <view class="center-point">本月业绩(元)</view>
                    <view class="center-pointnum">{{ floatDivide(Data.monthPerformance, 100) }}</view>
                </view>
                <view class="center-col">
                    <view class="center-point">累计业绩(元)</view>
                    <view class="center-pointnum">{{ floatDivide(Data.cumulativePerformance, 100) }}</view>
                </view>
            </view>
        </view>
        <view class="income-check">
            <text>推广订单</text>
            <view class="income-btn">
                <button
                    @click="changeTab(index)"
                    v-for="(item, index) in Data.tabList"
                    :key="index"
                    :class="['income-tab', Data.tab == index ? 'tab-red' : '']">
                    {{ item }}
                </button>
            </view>
        </view>
        <view class="income-container">
            <view v-if="Data.dataList.length" class="myIntegral-list">
                <view v-for="(item, index) in Data.dataList" :key="index" class="integral-item">
                    <image :src="item.img" class="achievement-main"></image>
                    <view class="achievement-col">
                        <view class="integral-record">
                            <view
                                class="name"
                                @click="
                                    router.push(
                                        '/pages-user/distributi/distributiPage/incomeDetail?orderId=' + item.orderId
                                    )
                                ">
                                <text class="one-row">{{ item.goodsName }}</text>
                                <image
                                    :src="getImgOssUrl('/ui-prod-2.8.0/white-jiantou.png')"
                                    class="income-go"></image>
                            </view>
                            <!-- 1-待发货、2-待收货、3-已收货、4-已完成、5-已关闭 -->
                            <view :class="['income-text', item.orderStatus == 5 ? 'gray-color' : 'red-color']">
                                {{ translateOrderCode(item.status, item.isSelfPickup, 1) || item.statusName }}
                            </view>
                        </view>
                        <view class="integral-record">
                            <view class="income-from">
                                <image class="icon" src="/static/marker/icon_user.png" />
                                <text class="nickname">{{ item.nickname }}</text>
                            </view>
                            <view class="income-point">￥{{ floatDivide(item.orderAmount, 100) }}</view>
                        </view>
                        <view class="integral-record">
                            <view class="income-from">
                                <image class="icon" src="/static/marker/icon_time.png" />
                                <text>{{ item.payTime }} </text>
                            </view>
                            <view class="income-recore">
                                赚：{{ item.benefitMode == 2 ? '￥' : '' }}{{ floatDivide(item.performance, 100) }}
                                {{ item.benefitMode == 1 ? '积分' : '' }}
                            </view>
                        </view>
                    </view>
                </view>
            </view>
            <view v-else class="no-data">
                <img class="empty" :src="getImgOssUrl('/ui-prod-2.3.0/empty-addr@2x.png')" />
                暂无数据
            </view>
            <view class="list-loading">
                {{ isBottom && Data.dataList.length ? (listLoading ? '加载中…' : '已经到底啦！') : '' }}
            </view>
            <Loading />
        </view>
    </view>
</template>
<script setup>
import { ref, reactive, computed, nextTick } from 'vue';
import { onShow, onReachBottom, onPageScroll } from '@dcloudio/uni-app';
import router from '@/router';
import request from '@/request';
import store from '@/store';
import Loading from '@/components/el-loading';
import { checkToken, getImgOssUrl, floatDivide, translateOrderCode } from '@/commons/utils';
const props = defineProps({
    num: {
        type: Number,
        default: 0
    }
});
// 跳转到等级中心页面
const jumpToCentr = () => {};
let listLoading = ref(false);
const Data = reactive({
    toDayPerformance: '', //今日业绩
    monthPerformance: '', //本月业绩
    cumulativePerformance: '', //累计业绩
    dataList: [],
    page: 1,
    perPage: 10,
    scrollTop: 0,
    totalCount: 0,
    tab: 0,
    tabList: ['今日', '本月', '全部']
});
const changeTab = index => {
    Data.tab = index;
    Data.dataList = [];
    Data.page = 1;
    getIntegralList();
};
const isBottom = computed(() => {
    return Data.scrollTop > 50;
});
const getIntegralList = async () => {
    listLoading.value = true;
    const { page, perPage } = Data;
    let tabData = [1, 2, 0];

    let res = await request('performanceList', { timeType: tabData[Data.tab], page: Data.page, perPage: Data.perPage });
    let list = res.data.data.list || [];
    Data.toDayPerformance = res.data.toDayPerformance;
    Data.monthPerformance = res.data.monthPerformance;
    Data.cumulativePerformance = res.data.cumulativePerformance;
    if (page === 1) {
        Data.dataList = list;
    } else {
        Data.dataList = Data.dataList.concat(list);
    }
    listLoading.value = false;
    Data.totalCount = res.data.data.totalCount;
};
onShow(() => {
    Data.tab = props.num;
    getIntegralList();
});
onPageScroll(e => {
    Data.scrollTop = e.scrollTop;
});
// 上拉加载
onReachBottom(() => {
    if (Data.totalCount === Data.dataList.length) {
        return;
    }
    Data.page++;
    getIntegralList();
});
</script>
<style lang="scss" scoped src="./index.scss"></style>
